<%@ page language="java" pageEncoding="UTF-8"%>

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %> 
<html> 
	<head>
		<title>宠物宝贝儿</title>
		<link rel="stylesheet" type="text/css" href="styles.css">
		<STYLE>#floater { 
			POSITION: absolute; visibility:hidden;
			}
		
		</STYLE> 
		
		
		
<script type="text/javascript">		
<!--
       //here is js for button click 
//使用ajax
		var xmlHttp;
		function createHttpRequest(){
	       if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();                
            }
		
		}
		
		function send(){
			//创建XMLHttpRequest对象
			createHttpRequest();
			
				//发起请求
			var date = document.getElementById("name");
	         var url = "../valid?name=" + date.value;
	         xmlHttp.onreadystatechange = callback;
	         xmlHttp.open("GET", url, true);   
	         xmlHttp.send(null);
		}
		
		//回调函数
		function callback(){
			if(xmlHttp.readyState==4){
				var s = xmlHttp.responseText;
				document.getElementById("userNameErrorDiv").innerHTML=s;
			}
		}
		
       
       
function dofeed(){
  alert("我还想吃，主人");
    alert("力量+30");
}


function dotellstory(){
  alert("主人讲的故事真好听。");
    alert("聪明+1，爱心+3，力量-5");
}


function doplay(){
  alert("没人陪我耍啊！");
    alert("聪明+3，爱心+1，力量-5");
}


//以下为浮动层控制代码
var Xpos = 0;
var Ypos = 0;
var Ygravity = 0.9;
var scrollPos = 0;
var oldScrollPos = 0;


function FloatMenu() { 
docWidth = 460; // update document width
docHeight = document.body.clientHeight; // update document height
oldScrollPos = scrollPos;
scrollPos = document.body.scrollTop; // update scrollbar position
if(scrollPos > 200) scrollPos = 180;

Xpos = docWidth; 
Yboundary = scrollPos + 135;

if (floater.offsetTop < Yboundary - 10) // Object is behind boundary
Ypos += 3;

if (floater.offsetTop > Yboundary + 10) // Object is past boundary
Ypos -= 3;

Ypos *= Ygravity; // Slow object down

floater.style.pixelLeft = Xpos;
floater.style.pixelTop += Ypos; // Make object bounce
}

window.setInterval("FloatMenu()", 30); 

 -->
		
</script>		
		
	</head>
	<body onselectstart="return false">
		
		<!-- 判断访客是否登录了,没有返回主页 	-->
	<% 
	
		if(pageContext.getSession()==null){
		response.sendRedirect("index.jsp");
		return;
		}
	%>
	

	<p><img src="img\backdrop.gif"/></p>
	<div style="float:left"><a href="index.jsp">首页</a>| <a href="foster.jsp">apply for your own pet </a></div>
	<div style="float: right;"><a href="queryinfo.jsp">| 宠物信息查询</a></div>
	
	<p>&nbsp;</p>
	<DIV id=tabline>&nbsp;</DIV>
		<div>
			<div id="m_blog" style="margin-left: 80px">
				<div style="width: 35%; float: left; margin-right: 40px">
					<div class="line">
						<div class="more">
							宠物id:<bean:write property="id" name="petpo"/>
							<a href="modify.jsp"><img src="img\edit.jpg" />编辑宠物信息</a>
						</div>
					</div>
					<div class="date">
						<bean:write property="intro" name="petpo"/>
						<br>
						我的主人是<bean:write property="hostName" name="petpo"/>
					</div>
					<div class="cnt">
						<table>
						<tr><td style="color:#00bbff; padding-right:70px">
						<p>
							力量:<bean:write property="power" name="petpo"/>
						</p>
						<p>
							智力:<bean:write property="ability" name="petpo"/>
						</p>
						<p>
							爱心:<bean:write property="love" name="petpo"/>
						</p></td>	
						<td>	
							<img src="<bean:write property="type" name="petpo"/>" alt="Here is the pet's image."/><br><br>
						</td>
						</tr>
						</table>
							
	
					</div>

					<div>
						<p>
							<html:submit property="feed" onclick="dofeed()">喂食</html:submit>
							<html:submit property="tellStory" onclick="dotellstory()">讲故事</html:submit>
							<html:submit property="playGame" onclick="doplay()">玩游戏</html:submit>
						</p>

			<button onclick= alert("框框没出来呢？");document.getElementById("float").style.visibility="visible";return false;>写宠物日记</button>

					</div>
				</div>
				<DIV id="cals" style="width: 40%; float: left;">
					<br>
					<div class="line">
						宠物日记
					</div>
					<br>
					<table id="pettable" border="1px" bordercolor="#00bbff">
						<tr>
							<th>
								日期
							</th>
							<th>
								标题
							</th>
							<th>
								天气
							</th>
						</tr>
						<tr>
							<td>
								9月10日
							</td>
							<td>
								今天是宝宝的生日
								<a href="#">〖删除〗</a>
							</td>
							<td>
								晴
							</td>
						</tr>
						<tr>
							<td>
								9月10日
							</td>
							<td>
								今天是宝宝的生日
								<a href="#">〖删除〗</a>
							</td>
							<td>
								晴
							</td>
						</tr>
						<tr>
							<td>
								9月10日
							</td>
							<td>
								今天是宝宝的生日
								<a href="#">〖删除〗</a>
							</td>
							<td>
								晴
							</td>
						</tr>
					</table>
				</DIV>
			</div>
	</div>
	
	<!-- 此为浮动层 -->

<div id="floater" style="BACKGROUND:#aaeeff; height:250px; width:400px;border:outset;font: xx-small">
	<div style="BACKGROUND: #00ccff; HEIGHT: 23px; width :400px;"><div style="float:left"><b>记录我的宠物</b></div><img style="float:right" src="img\close.gif" /></div>
 		<html:form action="diary.do" style="margin-left:30px;margin-bottom:10px;margin-top:10px">

				标题：
				<html:text property="title"/><html:errors property="title"/>
				天气：
				<html:text property="weather"/><html:errors property="weather"/>
				<br>正文：<br>
				<html:textarea property="content" rows="10" cols="60"></html:textarea>
				<html:submit value="记录日记"/>
				
			</html:form>

</div> 
	</body>
</html>